﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Template.Master" AutoEventWireup="true" CodeBehind="ProductDetails.aspx.cs" Inherits="Photocopy.ProductDetails" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
	<link rel="stylesheet" href="Scripts/js/animate.min.css" />

    <script src="Scripts/elevatezoom-master/jquery.elevateZoom-3.0.8.min.js"></script>
    <script src="Scripts/elevatezoom-master/jquery.elevatezoom.js"></script>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <div class="container-fluid">  
    	<div class="row">	
				<div class="col-md-5 col-sm-12">
                    <div class="slider">
                        <div style="height:430px;width:630px;" class="zoomWrapper">
                            <img style="border: 1px solid rgb(232, 232, 230); position: absolute;" id="zoom_03" src="Scripts/elevatezoom-master/images/small/image3.png" data-zoom-image="Scripts/elevatezoom-master/images/large/image3.jpg" width="630" />

                        </div>

                        <div id="gallery_01" style="width:630px;float:left;">
 
                        <asp:Repeater ID="RptImages" runat="server">
                            <ItemTemplate>
                                <a href="#" class="elevatezoom-gallery active" data-update="" data-image="Images/sanpham/small/image1.png" data-zoom-image="Images/sanpham/large/image1.jpg">
                                    <img src="Images/sanpham/small/image1.png" width="100" />
                                </a>
                            </ItemTemplate>
                        </asp:Repeater>

                        <a href="#" class="elevatezoom-gallery active" data-update="" data-image="Scripts/elevatezoom-master/images/small/image1.png" data-zoom-image="Scripts/elevatezoom-master/images/large/image1.jpg">
                            <img src="Scripts/elevatezoom-master/images/small/image1.png" width="100" />
                        </a>

                        <a href="#" class="elevatezoom-gallery" data-image="Scripts/elevatezoom-master/images/small/image2.png" data-zoom-image="Scripts/elevatezoom-master/images/large/image2.jpg">
                            <img src="Scripts/elevatezoom-master/images/small/image2.png" width="100" />
                        </a>

                        <a href="#" class="elevatezoom-gallery" data-image="Scripts/elevatezoom-master/images/small/image3.png" data-zoom-image="Scripts/elevatezoom-master/images/large/image3.jpg">
                             <img src="Scripts/elevatezoom-master/images/small/image3.png" width="100" />
                        </a>

                        <a href="#" class="elevatezoom-gallery" data-image="Scripts/elevatezoom-master/images/small/image4.png" data-zoom-image="Scripts/elevatezoom-master/images/large/image4.jpg">
                            <img src="Scripts/elevatezoom-master/images/small/image4.png" width="100" />
                        </a>

    
                        </div>
                    </div>
				</div>
				<div class="col-md-7 col-sm-12">
					<div class="detail">
						<h3><asp:Label runat="server" ID="lblTenSanPham"></asp:Label></h3>
                        <div class="chitiet-rating">
                            <p class="inline-block">Đánh giá sản phẩm :</p>
                            <div class="inline-block">
							    <span class="rating"><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span></span>
						    </div>
                        </div>
                        <asp:BulletedList ID="BulletedList1"  CssClass="list-detail" runat="server"></asp:BulletedList>
						<div class="row">
                            <div class="col-md-6 col-sm-12 chitiet-cot1">    
                                <div class="chitiet-tinhtrang">
                                    <asp:Label ID="Label1" runat="server" Text="Tình trạng :"></asp:Label>                                    
                                    <asp:Label ID="LBTinhTrang" runat="server"></asp:Label>
                                </div>
                                <div class="dongia">
                                    <div id="dongiagiagiam" class="middle" runat="server" style="display:none">
                                        <div class="col1">
                                            <div class="discount-box">
                                                -<asp:Label ID="lbGiaGiam" CssClass="giagiam" runat="server"></asp:Label><span>%</span>
                                            </div>
                                        </div> 
                                        <div class="col2">
                                            <div class="price-box">         
                                                <p class="old-price">
                                                    <asp:Label runat="server" CssClass="price" ID="lbDonGia"></asp:Label>
                                                </p>
                                                <p class="special-price">
                                                    <asp:Label runat="server" CssClass="price" ID="lbDonGiaMoi"></asp:Label>
                                                </p>
                                            </div> 
                                        </div>
                                    </div>                                      
                                    <div id="dongiakhonggiam" runat="server" style="display:none">
                                        <asp:Label runat="server" CssClass="chitiet-dongia" ID="lblDonGia"></asp:Label>
                                    </div>
  						        </div>
                            </div>
                            <div class="col-md-6 col-sm-12 chitiet-cot2">
                                <div class="chitiet-chinhhang">
                                    <asp:Label ID="Label2" runat="server" Text="Đảm bảo hàng chính hãng"></asp:Label>
                                </div>
                                <div class="chitiet-baohanh">
                                    <span>Bảo hành : </span><asp:Label ID="Label3" CssClass="font-weight" runat="server" Text="2 năm"></asp:Label>
                                </div>
                            </div>
                        </div>
						
					</div>
				</div>

		</div>
		
		<div class="row">
			<div class="promotion-info">
				<div class="info">Gói khuyến mại trí giá 1.200.000 VNĐ</div>
				<ul>
					<li>Quý khách vui lòng liên hệ trước để kiểm tra hàng tồn kho.</li>
					<li>Giá có thể thay đổi so với giá niêm yết trên website</li>
					<li>Vui lòng liên hệ để biết giá mới nhất và chương trình khuyến mại (nếu có).</li>
				</ul>
			</div>
		</div>
		
		<div class="row">
			<div class="details">
				<ul class="nav nav-tabs" role="tablist">
					<li class="active"><a href="#detail" class="details-title" role="tab" data-toggle="tab">Thông số kỹ thuật</a></li>
					<li><a href="#comment" class="details-title" role="tab" data-toggle="tab">Nhận Xét</a></li>
				</ul>

				<!-- Tab panes -->
				<div class="tab-content">
					<div class="tab-pane active" id="detail">

                        <asp:Repeater ID="RepeaterMainOption" runat="server" OnItemDataBound="ItemDataBound">
                            <ItemTemplate>
                                <div>
                                    <asp:Label ID="lbMainOptionID" runat="server" Visible="false" Text='<%#Eval("MainOptionID") %>'></asp:Label>
                                    <div class="mainoption-name">
                                        <span><asp:Label ID="lbMainOptionName" runat="server" Text='<%#Eval("MainOptionName") %>'></asp:Label></span>
                                    </div>
                                    <asp:Repeater ID="RepeaterOption" runat="server">
                                        <ItemTemplate>
                                            <div class="option-detail">
                                                <div class="option-name">
                                                    <asp:Label ID="OptionName" runat="server" Text='<%#Eval("OptionName") %>'></asp:Label>
                                                </div>
                                                <div class="option-description">
                                                    <asp:Label ID="OptionDescription" runat="server" Text='<%#Eval("OptionDescription") %>'></asp:Label>
                                                </div>
                                            </div>
                                            
                                        </ItemTemplate>
								    </asp:Repeater>
                                </div>
                            </ItemTemplate>

                        </asp:Repeater>



					</div>
					<div class="tab-pane" id="comment">
						<%--<!-- Begin Comments JavaScript Code -->
						<script type="text/javascript" async>
							function ajaxpath_54487a1e9ae74(url){return window.location.href == '' ? url : url.replace('&s=','&s=' + escape(window.location.href));}(function(){document.write('<div id="fcs_div_54487a1e9ae74"><a title="free comment script" href="http://www.freecommentscript.com">&nbsp;&nbsp;<b>Free HTML User Comments</b>...</a></div>');fcs_54487a1e9ae74=document.createElement('script');fcs_54487a1e9ae74.type="text/javascript";fcs_54487a1e9ae74.src=ajaxpath_54487a1e9ae74((document.location.protocol=="https:"?"https:":"http:")+"//www.freecommentscript.com/GetComments2.php?p=54487a1e9ae74&s=&Size=10#!54487a1e9ae74");setTimeout("document.getElementById('fcs_div_54487a1e9ae74').appendChild(fcs_54487a1e9ae74)",1);})();
						</script>
						<noscript>
							<div>
								<a href="http://www.freecommentscript.com" title="free html user comment box">Free Comment Script</a>
							</div>
						</noscript><!-- End Comments JavaScript Code -->--%>
                        <asp:ScriptManager runat="server" id="ScriptManager1"></asp:ScriptManager>
                        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                            <div class="comment">
                                <div class="comment-name">
                                    <div class="comment-name-lb">
                                        Name
                                    </div>
                                    <div class="comment-name-name">
                                        <asp:TextBox ID="txtName" CssClass="form-control" runat="server" placeholder="Nhập tên"></asp:TextBox>
                                    </div>								
                                </div>
                                <div class="comment-content">
                                    <div class="comment-content-lb">
                                        Content
                                    </div>
                                    <div class="comment-content-content">
                                        <asp:TextBox ID="txtContent" runat="server" placeholder="Nhập nội dung" TextMode="MultiLine" Rows="4" Columns="100" CssClass="txtcontent form-control" onkeypress="return CheckMaxLength(this,500);" ></asp:TextBox>
                                    </div>
                                    <script type="text/javascript">
                                        function CheckMaxLength(txt, maxLen) {
                                            if (txt.value.length > (maxLen - 1))
                                                return false;
                                            else {
                                                return true;
                                            }
                                        }
                                    </script>
                                </div>
                                <div class="comment-button">
                                    <asp:Button ID="btnSubmit" CssClass="btn btn-primary" runat="server" OnClick="SendMessage" Text="Gửi tin" />
                                </div>
                            </div>
                            <div class="cmt-contents">
                                <asp:Repeater ID="RepDetails" runat="server">
                                    <HeaderTemplate>
                                        <div class="comments-title">
                                            <b>Comments</b>
                                        </div>
                                    </HeaderTemplate>
                                    <ItemTemplate>
									    <div class="comments">
										    <div class="comments-name">
											    <div class="comments-name-name">
                                                    <%#Eval("Name") %>
											    </div>
                                                <div class="comments-name-date">
                                                    (<%#Eval("Postdate","{0:hh:mm dd-MM-yyyy}") %>)
                                                </div>
                                            
										    </div>
										    <div class="comments-content">
                                                <%#Eval("Content") %>
										    </div>
									    </div>
                                    </ItemTemplate>
                                    <FooterTemplate></FooterTemplate>
                                </asp:Repeater>
                            </div>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click">
                            </asp:AsyncPostBackTrigger>
                        </Triggers>
                        </asp:UpdatePanel>

                        <div class="button-loadmore">
                            <asp:Button ID="Button2" runat="server" CssClass="btn btn-success" onclick="LoadMore_Click" Text="Load More..." />
                        </div>
                        
                        <asp:UpdateProgress ID="UpdateProgress1" runat="server" ClientIDMode="Static">
                            <ProgressTemplate>
                                <b>Loading Additional Data....</b>
                            </ProgressTemplate>
                        </asp:UpdateProgress>

					</div>
				</div>
                
			</div>
		</div>
	</div>	

	<script type="text/javascript" src="Scripts/jquery-1.9.0.min.js"></script>
    <script src="Scripts/elevatezoom-master/jquery.elevateZoom-3.0.8.min.js"></script>
    <script src="Scripts/elevatezoom-master/jquery.elevatezoom.js"></script>
    <script>
       
        $("#zoom_03").elevateZoom({ gallery: 'gallery_01', cursor: 'pointer', galleryActiveClass: "active", imageCrossfade: true, loadingIcon: "Images/loading.png" });

            $("#zoom_03").bind("click", function (e) {
                var ez = $('#zoom_03').data('elevateZoom');
                ez.closeAll(); //NEW: This function force hides the lens, tint and window	
                $.fancybox(ez.getGalleryList());
                return false;
            });
    </script>
   
   
</asp:Content>
